<template>
  <div class="audio-home">
    <div class="navbar">
      <div class="nav-back" @click="$router.go(-1)">
        <i class="fas fa-chevron-left"></i>
      </div>
      <div class="nav-title">组织士气与动力恢复</div>
      <div></div>
    </div>

    <div class="container">
      <!-- 危机复盘表分类 -->
      <section class="category">
        <div class="directory-header" @click="toggleDirectory('crisis')">
          <h2 class="category-title">
            <i class="icon-form"></i>
            危机复盘工具
            <span
              class="directory-arrow"
              :class="{ expanded: expandedDirectories.crisis }"
            >
              <i class="fas fa-chevron-down"></i>
            </span>
          </h2>
          <div class="directory-title">评估与记录表格</div>
        </div>

        <div v-show="expandedDirectories.crisis" class="resource-list">
          <div class="resource-item" @click="goToCrisisForm">
            <div class="resource-info">
              <h3 class="resource-title">危机复盘表</h3>
              <span class="resource-type form-type">表单</span>
            </div>
          </div>
        </div>
      </section>
      <!-- 正念音频分类 -->
      <section class="category">
        <div class="directory-header" @click="toggleDirectory('mindfulness')">
          <h2 class="category-title">
            <i class="icon-mindfulness"></i>
            正念练习
            <span
              class="directory-arrow"
              :class="{ expanded: expandedDirectories.mindfulness }"
            >
              <i class="fas fa-chevron-down"></i>
            </span>
          </h2>
          <div class="directory-title">冥想与放松指导</div>
        </div>

        <div v-show="expandedDirectories.mindfulness" class="audio-list">
          <div
            v-for="(audio, index) in mindfulnessAudios"
            :key="index"
            class="audio-item"
            @click="playAudio(audio)"
          >
            <div class="audio-preview">
              <div class="audio-icon">
                <i class="icon-play"></i>
              </div>
            </div>
            <div class="audio-info">
              <h3 class="audio-title">{{ audio.title }}</h3>
              <div class="audio-meta">
                <span class="audio-type">{{ audio.type }}</span>
                <span class="audio-duration">{{
                  audio.duration || "--:--"
                }}</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 助眠音频分类 -->
      <section class="category">
        <div class="directory-header" @click="toggleDirectory('sleep')">
          <h2 class="category-title">
            <i class="icon-sleep"></i>
            助眠音乐
            <span
              class="directory-arrow"
              :class="{ expanded: expandedDirectories.sleep }"
            >
              <i class="fas fa-chevron-down"></i>
            </span>
          </h2>
          <div class="directory-title">放松入眠音乐</div>
        </div>

        <div v-show="expandedDirectories.sleep" class="audio-list">
          <div
            v-for="(audio, index) in sleepAudios"
            :key="index"
            class="audio-item"
            @click="playAudio(audio)"
          >
            <div class="audio-preview">
              <div class="audio-icon">
                <i class="icon-play"></i>
              </div>
            </div>
            <div class="audio-info">
              <h3 class="audio-title">{{ audio.title }}</h3>
              <div class="audio-meta">
                <span class="audio-type">{{ audio.type }}</span>
                <span class="audio-duration">{{
                  audio.duration || "--:--"
                }}</span>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>

    <!-- 音频播放器 -->
    <div v-if="currentAudio" class="audio-player-overlay">
      <div class="audio-player">
        <div class="player-header">
          <h3 class="player-title">{{ currentAudio.title }}</h3>
          <button class="close-btn" @click="currentAudio = null">×</button>
        </div>
        <div class="player-content">
          <audio
            ref="audioElement"
            :src="currentAudio.url"
            controls
            autoplay
            @loadedmetadata="setAudioDuration"
            @timeupdate="updateProgress"
            @ended="onAudioEnded"
          ></audio>
          <div class="progress-container" v-if="currentAudio.duration">
            <div class="progress-bar" :style="{ width: progress + '%' }"></div>
          </div>
          <div class="player-controls">
            <button class="control-btn" @click="togglePlay">
              <i :class="isPlaying ? 'icon-pause' : 'icon-play'"></i>
            </button>
            <button class="control-btn" @click="restartAudio">
              <i class="icon-restart"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "AudioHome",
  data() {
    return {
      currentAudio: null,
      isPlaying: false,
      progress: 0,
      expandedDirectories: {
        mindfulness: false,
        sleep: false,
        crisis: false,
      },
      mindfulnessAudios: [
        {
          title: "正念-与疼痛共处(孟)",
          url: "https://lesson.iapeap.com/%E5%8D%B1%E6%9C%BA%E5%B9%B2%E9%A2%84%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%BB%84%E7%BB%87%E5%A3%AB%E6%B0%94%E4%B8%8E%E5%8A%A8%E5%8A%9B%E6%81%A2%E5%A4%8D/mp3/%E6%AD%A3%E5%BF%B5-%E4%B8%8E%E7%96%BC%E7%97%9B%E5%85%B1%E5%A4%84%28%E5%AD%9F%29.mp3",
          type: "MP3",
          duration: null,
        },
        {
          title: "正念-冥想减压放松(孟)",
          url: "https://lesson.iapeap.com/%E5%8D%B1%E6%9C%BA%E5%B9%B2%E9%A2%84%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%BB%84%E7%BB%87%E5%A3%AB%E6%B0%94%E4%B8%8E%E5%8A%A8%E5%8A%9B%E6%81%A2%E5%A4%8D/mp3/%E6%AD%A3%E5%BF%B5-%E5%86%A5%E6%83%B3%E5%87%8F%E5%8E%8B%E6%94%BE%E6%9D%BE%28%E5%AD%9F%29.mp3",
          type: "MP3",
          duration: null,
        },
        {
          title: "正念-呼吸练习",
          url: "https://lesson.iapeap.com/%E5%8D%B1%E6%9C%BA%E5%B9%B2%E9%A2%84%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%BB%84%E7%BB%87%E5%A3%AB%E6%B0%94%E4%B8%8E%E5%8A%A8%E5%8A%9B%E6%81%A2%E5%A4%8D/mp3/%E6%AD%A3%E5%BF%B5-%E5%91%BC%E5%90%B8%E7%BB%83%E4%B9%A0.mp3",
          type: "MP3",
          duration: null,
        },
        {
          title: "正念-应对困难情绪(孟)",
          url: "https://lesson.iapeap.com/%E5%8D%B1%E6%9C%BA%E5%B9%B2%E9%A2%84%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%BB%84%E7%BB%87%E5%A3%AB%E6%B0%94%E4%B8%8E%E5%8A%A8%E5%8A%9B%E6%81%A2%E5%A4%8D/mp3/%E6%AD%A3%E5%BF%B5-%E5%BA%94%E5%AF%B9%E5%9B%B0%E9%9A%BE%E6%83%85%E7%BB%AA%28%E5%AD%9F%29.mp3",
          type: "MP3",
          duration: null,
        },
        {
          title: "正念-探索安全岛冥想(孟)",
          url: "https://lesson.iapeap.com/%E5%8D%B1%E6%9C%BA%E5%B9%B2%E9%A2%84%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%BB%84%E7%BB%87%E5%A3%AB%E6%B0%94%E4%B8%8E%E5%8A%A8%E5%8A%9B%E6%81%A2%E5%A4%8D/mp3/%E6%AD%A3%E5%BF%B5-%E6%8E%A2%E7%B4%A2%E5%AE%89%E5%85%A8%E5%B2%9B%E5%86%A5%E6%83%B3%28%E5%AD%9F%29.mp3",
          type: "MP3",
          duration: null,
        },
        {
          title: "正念-缓解疼痛(孟)",
          url: "https://lesson.iapeap.com/%E5%8D%B1%E6%9C%BA%E5%B9%B2%E9%A2%84%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%BB%84%E7%BB%87%E5%A3%AB%E6%B0%94%E4%B8%8E%E5%8A%A8%E5%8A%9B%E6%81%A2%E5%A4%8D/mp3/%E6%AD%A3%E5%BF%B5-%E7%BC%93%E8%A7%A3%E7%96%BC%E7%97%9B%28%E5%AD%9F%29.mp3",
          type: "MP3",
          duration: null,
        },
        {
          title: "正念-肌肉放松练习(郭)",
          url: "https://lesson.iapeap.com/%E5%8D%B1%E6%9C%BA%E5%B9%B2%E9%A2%84%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%BB%84%E7%BB%87%E5%A3%AB%E6%B0%94%E4%B8%8E%E5%8A%A8%E5%8A%9B%E6%81%A2%E5%A4%8D/mp3/%E6%AD%A3%E5%BF%B5-%E8%82%8C%E8%82%89%E6%94%BE%E6%9D%BE%E7%BB%83%E4%B9%A0%28%E9%83%AD%29.mp3",
          type: "MP3",
          duration: null,
        },
        {
          title: "正念-肌肉渐进式放松",
          url: "https://lesson.iapeap.com/%E5%8D%B1%E6%9C%BA%E5%B9%B2%E9%A2%84%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%BB%84%E7%BB%87%E5%A3%AB%E6%B0%94%E4%B8%8E%E5%8A%A8%E5%8A%9B%E6%81%A2%E5%A4%8D/mp3/%E6%AD%A3%E5%BF%B5-%E8%82%8C%E8%82%89%E6%B8%90%E8%BF%9B%E5%BC%8F%E6%94%BE%E6%9D%BE.mp3",
          type: "MP3",
          duration: null,
        },
        {
          title: "正念-身体工厂下班放松法 (孟)",
          url: "https://lesson.iapeap.com/%E5%8D%B1%E6%9C%BA%E5%B9%B2%E9%A2%84%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%BB%84%E7%BB%87%E5%A3%AB%E6%B0%94%E4%B8%8E%E5%8A%A8%E5%8A%9B%E6%81%A2%E5%A4%8D/mp3/%E6%AD%A3%E5%BF%B5-%E8%BA%AB%E4%BD%93%E5%B7%A5%E5%8E%82%E4%B8%8B%E7%8F%AD%E6%94%BE%E6%9D%BE%E6%B3%95%20%28%E5%AD%9F%29.mp3",
          type: "MP3",
          duration: null,
        },
        {
          title: "正念-身体扫描(孟)",
          url: "https://lesson.iapeap.com/%E5%8D%B1%E6%9C%BA%E5%B9%B2%E9%A2%84%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%BB%84%E7%BB%87%E5%A3%AB%E6%B0%94%E4%B8%8E%E5%8A%A8%E5%8A%9B%E6%81%A2%E5%A4%8D/mp3/%E6%AD%A3%E5%BF%B5-%E8%BA%AB%E4%BD%93%E6%89%AB%E6%8F%8F%28%E5%AD%9F%29.mp3",
          type: "MP3",
          duration: null,
        },
        {
          title: "正念-身体扫描",
          url: "https://lesson.iapeap.com/%E5%8D%B1%E6%9C%BA%E5%B9%B2%E9%A2%84%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%BB%84%E7%BB%87%E5%A3%AB%E6%B0%94%E4%B8%8E%E5%8A%A8%E5%8A%9B%E6%81%A2%E5%A4%8D/mp3/%E6%AD%A3%E5%BF%B5-%E8%BA%AB%E4%BD%93%E6%89%AB%E6%8F%8F.m4a",
          type: "M4A",
          duration: null,
        },
        {
          title: "正念助眠-呼吸练习(孟)",
          url: "https://lesson.iapeap.com/%E5%8D%B1%E6%9C%BA%E5%B9%B2%E9%A2%84%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%BB%84%E7%BB%87%E5%A3%AB%E6%B0%94%E4%B8%8E%E5%8A%A8%E5%8A%9B%E6%81%A2%E5%A4%8D/mp3/%E6%AD%A3%E5%BF%B5%E5%8A%A9%E7%9C%A0-%E5%91%BC%E5%90%B8%E7%BB%83%E4%B9%A0%28%E5%AD%9F%29.mp3",
          type: "MP3",
          duration: null,
        },
        {
          title: "正念助眠-睡前故事放松法(孟)",
          url: "https://lesson.iapeap.com/%E5%8D%B1%E6%9C%BA%E5%B9%B2%E9%A2%84%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%BB%84%E7%BB%87%E5%A3%AB%E6%B0%94%E4%B8%8E%E5%8A%A8%E5%8A%9B%E6%81%A2%E5%A4%8D/mp3/%E6%AD%A3%E5%BF%B5%E5%8A%A9%E7%9C%A0-%E7%9D%A1%E5%89%8D%E6%95%85%E4%BA%8B%E6%94%BE%E6%9D%BE%E6%B3%95%28%E5%AD%9F%29.mp3",
          type: "MP3",
          duration: null,
        },
      ],
      sleepAudios: [
        {
          title: "Weightless失重",
          url: "https://lesson.iapeap.com/%E5%8D%B1%E6%9C%BA%E5%B9%B2%E9%A2%84%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%BB%84%E7%BB%87%E5%A3%AB%E6%B0%94%E4%B8%8E%E5%8A%A8%E5%8A%9B%E6%81%A2%E5%A4%8D/%E5%8A%A9%E7%9C%A0MP3/Weightless%E5%A4%B1%E9%87%8D.m4a",
          type: "M4A",
          duration: null,
        },
        {
          title: "巴赫：《哥德堡变奏曲》",
          url: "https://lesson.iapeap.com/%E5%8D%B1%E6%9C%BA%E5%B9%B2%E9%A2%84%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%BB%84%E7%BB%87%E5%A3%AB%E6%B0%94%E4%B8%8E%E5%8A%A8%E5%8A%9B%E6%81%A2%E5%A4%8D/%E5%8A%A9%E7%9C%A0MP3/%E5%B7%B4%E8%B5%AB%EF%BC%9A%E3%80%8A%E5%93%A5%E5%BE%B7%E5%A0%A1%E5%8F%98%E5%A5%8F%E6%9B%B2%E3%80%8B.m4a",
          type: "M4A",
          duration: null,
        },
        {
          title: "故乡的原风景（陶笛版）",
          url: "https://lesson.iapeap.com/%E5%8D%B1%E6%9C%BA%E5%B9%B2%E9%A2%84%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%BB%84%E7%BB%87%E5%A3%AB%E6%B0%94%E4%B8%8E%E5%8A%A8%E5%8A%9B%E6%81%A2%E5%A4%8D/%E5%8A%A9%E7%9C%A0MP3/%E6%95%85%E4%B9%A1%E7%9A%84%E5%8E%9F%E9%A3%8E%E6%99%AF%EF%BC%88%E9%99%B6%E7%AC%9B%E7%89%88%EF%BC%89.m4a",
          type: "M4A",
          duration: null,
        },
        {
          title: "海浪声",
          url: "https://lesson.iapeap.com/%E5%8D%B1%E6%9C%BA%E5%B9%B2%E9%A2%84%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%BB%84%E7%BB%87%E5%A3%AB%E6%B0%94%E4%B8%8E%E5%8A%A8%E5%8A%9B%E6%81%A2%E5%A4%8D/%E5%8A%A9%E7%9C%A0MP3/%E6%B5%B7%E6%B5%AA%E5%A3%B0.mp3",
          type: "MP3",
          duration: null,
        },
        {
          title: "篝火声",
          url: "https://lesson.iapeap.com/%E5%8D%B1%E6%9C%BA%E5%B9%B2%E9%A2%84%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%BB%84%E7%BB%87%E5%A3%AB%E6%B0%94%E4%B8%8E%E5%8A%A8%E5%8A%9B%E6%81%A2%E5%A4%8D/%E5%8A%A9%E7%9C%A0MP3/%E7%AF%9D%E7%81%AB%E5%A3%B0.mp3",
          type: "MP3",
          duration: null,
        },
        {
          title: "轻音乐",
          url: "https://lesson.iapeap.com/%E5%8D%B1%E6%9C%BA%E5%B9%B2%E9%A2%84%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%BB%84%E7%BB%87%E5%A3%AB%E6%B0%94%E4%B8%8E%E5%8A%A8%E5%8A%9B%E6%81%A2%E5%A4%8D/%E5%8A%A9%E7%9C%A0MP3/%E8%BD%BB%E9%9F%B3%E4%B9%90.mp3",
          type: "MP3",
          duration: null,
        },
        {
          title: "阿尔法脑波音乐",
          url: "https://lesson.iapeap.com/%E5%8D%B1%E6%9C%BA%E5%B9%B2%E9%A2%84%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%BB%84%E7%BB%87%E5%A3%AB%E6%B0%94%E4%B8%8E%E5%8A%A8%E5%8A%9B%E6%81%A2%E5%A4%8D/%E5%8A%A9%E7%9C%A0MP3/%E9%98%BF%E5%B0%94%E6%B3%95%E8%84%91%E6%B3%A2%E9%9F%B3%E4%B9%90.m4a",
          type: "M4A",
          duration: null,
        },
        {
          title: "雨声",
          url: "https://lesson.iapeap.com/%E5%8D%B1%E6%9C%BA%E5%B9%B2%E9%A2%84%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%BB%84%E7%BB%87%E5%A3%AB%E6%B0%94%E4%B8%8E%E5%8A%A8%E5%8A%9B%E6%81%A2%E5%A4%8D/%E5%8A%A9%E7%9C%A0MP3/%E9%9B%A8%E5%A3%B0.m4a",
          type: "M4A",
          duration: null,
        },
        {
          title: "雷雨声",
          url: "https://lesson.iapeap.com/%E5%8D%B1%E6%9C%BA%E5%B9%B2%E9%A2%84%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%BB%84%E7%BB%87%E5%A3%AB%E6%B0%94%E4%B8%8E%E5%8A%A8%E5%8A%9B%E6%81%A2%E5%A4%8D/%E5%8A%A9%E7%9C%A0MP3/%E9%9B%B7%E9%9B%A8%E5%A3%B0.m4a",
          type: "M4A",
          duration: null,
        },
        {
          title: "鸟鸣声",
          url: "https://lesson.iapeap.com/%E5%8D%B1%E6%9C%BA%E5%B9%B2%E9%A2%84%E7%9F%A5%E8%AF%86%E5%BA%93/%E7%BB%84%E7%BB%87%E5%A3%AB%E6%B0%94%E4%B8%8E%E5%8A%A8%E5%8A%9B%E6%81%A2%E5%A4%8D/%E5%8A%A9%E7%9C%A0MP3/%E9%B8%9F%E9%B8%A3%E5%A3%B0.m4a",
          type: "M4A",
          duration: null,
        },
      ],
    };
  },
  methods: {
    // 切换目录展开状态
    toggleDirectory(category) {
      this.expandedDirectories[category] = !this.expandedDirectories[category];
    },

    // 跳转到危机复盘表
    goToCrisisForm() {
      // 这里假设您的危机复盘表页面路由为 '/crisis-form'
      // 您可以根据实际路由配置进行调整
      this.$router.push({
        path: "/wjfrom",
      });
    },

    playAudio(audio) {
      this.currentAudio = audio;
      this.isPlaying = true;
      this.progress = 0;

      // 确保音频元素已加载
      this.$nextTick(() => {
        const audioElement = this.$refs.audioElement;
        if (audioElement) {
          audioElement.play().catch((e) => {
            console.error("播放失败:", e);
          });
        }
      });
    },

    togglePlay() {
      const audioElement = this.$refs.audioElement;
      if (!audioElement) return;

      if (this.isPlaying) {
        audioElement.pause();
      } else {
        audioElement.play();
      }
      this.isPlaying = !this.isPlaying;
    },

    restartAudio() {
      const audioElement = this.$refs.audioElement;
      if (!audioElement) return;

      audioElement.currentTime = 0;
      audioElement.play();
      this.isPlaying = true;
    },

    setAudioDuration() {
      const audioElement = this.$refs.audioElement;
      if (!audioElement || !this.currentAudio) return;

      const duration = audioElement.duration;
      if (duration && !isNaN(duration)) {
        const minutes = Math.floor(duration / 60);
        const seconds = Math.floor(duration % 60);
        this.currentAudio.duration = `${minutes}:${seconds
          .toString()
          .padStart(2, "0")}`;
      }
    },

    updateProgress() {
      const audioElement = this.$refs.audioElement;
      if (!audioElement || !audioElement.duration) return;

      this.progress = (audioElement.currentTime / audioElement.duration) * 100;
    },

    onAudioEnded() {
      this.isPlaying = false;
      this.progress = 100;
    },
  },
};
</script>

<style scoped>
.navbar {
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.nav-back {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.nav-back:hover {
  background: #e0e0e0;
}

.nav-title {
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.audio-home {
  background-color: #f5f7fa;
  color: #333;
  line-height: 1.6;
  min-height: 100vh;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.page-header {
  text-align: center;
  padding: 30px 0;
  margin-bottom: 30px;
  background: linear-gradient(135deg, #4caf50 0%, #8bc34a 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.page-header h1 {
  font-size: 2.2rem;
  margin-bottom: 10px;
}

.subtitle {
  font-size: 1.1rem;
  opacity: 0.9;
}

.category {
  margin-bottom: 40px;
  background-color: white;
  border-radius: 10px;
  padding: 25px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.category-title {
  font-size: 1.5rem;
  color: #2c3e50;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #eaeaea;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.icon-mindfulness,
.icon-sleep,
.icon-form {
  margin-right: 10px;
  font-size: 1.3rem;
}

.icon-mindfulness::before {
  content: "🧘";
}

.icon-sleep::before {
  content: "😴";
}

.icon-form::before {
  content: "📋";
}

/* 目录样式 */
.directory-header {
  cursor: pointer;
  margin-bottom: 15px;
  padding: 10px;
  border-radius: 8px;
  transition: background-color 0.3s;
}

.directory-header:hover {
  background-color: #f5f7fa;
}

.directory-title {
  font-size: 1.1rem;
  color: #666;
  margin-top: 5px;
  padding-left: 30px;
}

.directory-arrow {
  transition: transform 0.3s ease;
  color: #666;
}

.directory-arrow.expanded {
  transform: rotate(180deg);
}

.audio-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.resource-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.audio-item,
.resource-item {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  cursor: pointer;
}

.audio-item {
  display: flex;
  align-items: center;
  padding: 15px;
}

.resource-item {
  padding: 20px;
}

.audio-item:hover,
.resource-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}

.audio-preview {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4caf50 0%, #8bc34a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  flex-shrink: 0;
}

.audio-icon {
  color: white;
  font-size: 1.2rem;
}

.icon-play::before {
  content: "▶";
}

.icon-pause::before {
  content: "⏸";
}

.icon-restart::before {
  content: "↺";
}

.audio-info,
.resource-info {
  flex-grow: 1;
}

.audio-title,
.resource-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: #2c3e50;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.audio-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.audio-type,
.resource-type {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
}

.audio-type {
  background-color: #e3f2fd;
  color: #1565c0;
}

.form-type {
  background-color: #fff3e0;
  color: #ef6c00;
}

.audio-duration {
  font-size: 0.9rem;
  color: #7f8c8d;
}

.audio-player-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  box-sizing: border-box;
}

.audio-player {
  width: 90%;
  max-width: 500px;
  background-color: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.player-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: linear-gradient(135deg, #4caf50 0%, #8bc34a 100%);
  color: white;
}

.player-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
}

.close-btn {
  background: none;
  border: none;
  color: white;
  font-size: 1.8rem;
  cursor: pointer;
  padding: 5px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.3s;
}

.close-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.player-content {
  padding: 20px;
}

.player-content audio {
  width: 100%;
  margin-bottom: 15px;
}

.progress-container {
  width: 100%;
  height: 6px;
  background-color: #e0e0e0;
  border-radius: 3px;
  margin-bottom: 15px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(135deg, #4caf50 0%, #8bc34a 100%);
  transition: width 0.1s linear;
}

.player-controls {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.control-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #4caf50 0%, #8bc34a 100%);
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}

.control-btn:hover {
  transform: scale(1.1);
}

@media (max-width: 768px) {
  .audio-list,
  .resource-list {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }

  .page-header h1 {
    font-size: 1.8rem;
  }

  .category {
    padding: 15px;
  }

  .audio-item {
    padding: 12px;
  }

  .audio-preview {
    width: 50px;
    height: 50px;
  }
}
</style>
